<!-- Header.vue -->
<template>
  <div class="route-header">
    <div class="route-title">路径规划导航</div>
  </div>
</template>

<script>
export default {
  name: 'Header'
}
</script>

<style scoped>
.route-header {
  position: absolute;
  left: 0;
  top: 0;
  height: 80px;
  width: 100%;
  background: url(../../public/img/bg.png) no-repeat 50% 50%;
  background-size: 100% 100%;
  z-index: 1;
}

.route-title {
  font-size: 28px;
  line-height: 80px;
  padding-left: 30px;
  letter-spacing: 4px;
  background: linear-gradient(to bottom, #FDFCFC, #A0D5FC);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bold;
  text-shadow: 0 0 5px #A0D5FC;
}
</style>
